.travelTipsFocus {
  .search-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;

    .at-search-bar__action {
      padding: 0 !important;
    }
  }
}

.travelTips {
  background-color: #fff;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;

  .choiceCity {
    margin-left: 12Px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    padding: 10px 24px;
    border-radius: 36px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.09);

    .city-name {
      margin-right: 5Px;
      font-size: 28px;
    }

    .triangle-city {
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid black;
    }
  }

  .left-back-icon {
    z-index: 9997;
    position: fixed;
    left: 10px;
    height: 32Px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .at-float-layout {
    z-index: 9999 !important;

    .at-float-layout__container {
      min-height: 85vh !important;
      max-height: 85vh !important;
      border-radius: 12Px 12Px 0 0;

      .layout-body {
        padding: 0;
        max-height: 85vh !important;
      }
    }

    .go-to-down {
      margin: 10Px 0;
      width: 100%;
      display: flex;
      justify-content: center;

      .go-to-down-icon-wrapper {
        width: 60Px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28Px;
        border-radius: 36px;
        background-color: #f3f3f3;
      }
    }
  }

  .layout-body__content {
    max-height: inherit !important;
    height: 85vh !important;
  }

  .scroll_view_suggestion {
    height: calc(85vh - 200px) !important;
    position: fixed;
    bottom: 0;
    left: 0;

    .address-wrapper {
      height: 100% !important;
    }

    .address-items-left {
      padding-right: 0 !important;
    }
  }

  .at-search-bar__placeholder-wrap, .at-search-bar__input, .at-search-bar__input-cnt, .at-search-bar__clear {
    height: 36Px !important;
  }

  .info_card_wrapper {
    width: fit-content;
    position: relative !important;
    min-width: 100px;
    background-color: white;
    max-width: 300Px;
    text-align: center;
    padding: 25Px 10Px 12Px;
    top: -12Px;
    border-radius: 6Px;
    box-shadow: rgba(0, 0, 0, 0.15) 0 2Px 4Px 0;

    .info_card {
      font-size: 14Px;
    }

    .info_card_icon {
      width: 10Px;
      height: 10Px;
      background-color: white;
      transform: rotate(45deg);
      position: absolute;
      bottom: -4Px;
      left: 0;
      right: 0;
      margin: auto;
      box-shadow: rgba(0, 0, 0, 0.15) 2Px 2Px 2Px;
    }

    .info-card_close {
      svg {
        width: 15Px;
        height: 15Px;
        position: absolute;
        right: 5Px;
        top: 8Px;
        cursor: pointer;
      }
    }
  }

  .search-wrapper-hidden-action {
    .at-search-bar__action {
      display: none;
    }
  }

  .search-wrapper {
    transition: all 0.35s ease;
    background-color: #fff;
    padding: 6px 20px 18px;
    z-index: 9999;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.09);

    .at-search-bar {
      padding: 0;
    }

    .at-search-bar::after {
      content: none;
    }

    .at-search-bar__action {
      background-color: transparent;
      color: #4e5e80;
      text-shadow: 0 0 .1px;
    }

    .at-search-bar__input-cnt {
      border-radius: 6Px;
    }
  }

  .address-wrapper {
    height: 45vh;
    transition: all 0.35s ease;

    .address-list-items {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 40px 24px;

      .address-items-left {
        padding-right: 40px;
        width: 100%;

        .address-items-title {
          font-weight: bold;
          font-size: 30px;
        }

        .address-items-sub-title {
          margin-top: 14px;
          font-size: 26px;
          color: #888;
        }
      }

      .address-items-right {
        text-align: right;

        .img, .taro-img, image {
          width: 38px;
          min-width: 38px;
          height: 38px;
        }

        .location-distance {
          position: relative;
          top: -2Px;
          white-space: nowrap;
          font-size: 26px;
          color: #888;
        }
      }
    }

    .address-list-items::after {
      content: "";
      position: absolute;
      -webkit-transform-origin: center;
      transform-origin: center;
      box-sizing: border-box;
      pointer-events: none;
      left: 0;
      width: 100%;
      bottom: 0;
      border-top: 1Px solid #d6e4ef;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }


    .address-list-items:last-child::after {
      content: none !important;
    }
  }

  .listNull {
    position: fixed;
    left: 0;
    top: 55vh;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;

    image, .taro-img {
      width: 295px;
      height: 295px;
      margin: 86px auto 35px;
    }

    .text {
      font-size: 26px;
      color: #666;
      line-height: 1.5;
    }
  }

  .scroll-wrapper {
    margin-right: 40px;
  }

  .tab-list-wrapper {
    position: absolute;
    left: 0;
    z-index: 9997;
    bottom: 45vh;
    width: 100%;
    padding: 10px 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), #fff);
    transition: all 0.35s ease;

    .tab-list-item-wrapper {
      z-index: 9999;
      display: flex;
      justify-content: space-between;
      padding: 0 40px 10px;

      .tab-list-items {
        border-radius: 10px;
        min-width: 100px;
        background-color: #fff;
        text-align: center;
        padding: 22px 10px;
        margin-right: 20px;
        box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);

        .tab-img, img, .taro-img {
          width: 24Px;
          height: 24Px;
        }

        .tab-items-text {
          position: relative;
          top: -4Px;
          font-size: 24px;
        }
      }

      .tab-list-items-active {
        border: 1px solid $mainColor;
      }

      .tab-list-items:last-child {
        margin-right: 0 !important;
      }
    }
  }

  .currentPosition {
    position: fixed;
    width: 40Px;
    right: 20Px;
    top: 30vh;
    z-index: 9997;
    transition: all 0.35s ease;
  }

  #container {
    position: relative;
    width: 100%;
    height: 55vh;
    z-index: 9;
    cursor: url(https://mapapi.qq.com/web/lbs/static/lbs_home/icon/point1.ico) 12.5 12.5, crosshair;
    transition: all 0.35s ease;

    .logo-text, a {
      display: none;
    }

    .locationpicker-ic-marker {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -146px;
      margin-left: -15px;
      width: 72px;
      height: 72px;
      z-index: 10;
    }

    .locationpicker-img {
      width: 72px;
      height: 72px;
    }

    .locationpicker-animation {
      animation: markermove 0.5s ease;
    }

    @keyframes markermove {
      from {
        transform: translateY(0)
      }
      50% {
        transform: translateY(-50px)
      }
      to {
        transform: translateY(0)
      }
    }
  }
}
